<template>
  <div class="root">

        <el-form ref="form"
                 :model="form"
                 label-width="200px"
        >
          <div v-for="(dataa,index) in counter ">
            <el-row>
              <el-col>
                <span>排期输入:</span>
                  <el-form-item>
                    <el-input v-model="dataa.aCode" placeholder="A码" ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-date-picker
                      v-model="dataa.standardComeTime"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                    > </el-date-picker>
                  </el-form-item>
                <el-form-item>
                  <el-button type="danger" @click="del(index)">删除</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <el-form-item>
            <el-button type="primary" @click="addEquip()">提交</el-button>
            <el-button type="primary" @click="addInput()">添加</el-button>
            <span >&#12288 &#12288</span>
          </el-form-item>
        </el-form>
    <!--    v-loading="listLoading"-->
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      max-height="580"
      fit
      highlight-current-row
      v-loading = "listLoading"
    >
      <el-table-column align="center" label="机台号">
        <template slot-scope="techlist">
          <span>{{techlist.row.aCode}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标准件来料日期"  prop="date" >
        <template slot-scope="techlist">
          <span>{{ parseDateFull(techlist.row.standardComeTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        align="center" prop="created_at" label="删除" width="150" >
        <template slot-scope="techlist">
          <el-button type="danger" icon="el-icon-delete" size="small"  @click="confirmDelete(techlist.row)" circle></el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>


<style>
  .el-form-item{
    display: inline-block !important ;
  }

  .el-form-item__label{
    display: none;
    width: 0px !important;
  }

  .el-form-item__content{
    margin-left: 3px !important;
    margin-right: 3px !important;
  }


</style>





<script>

  import FileSelect from '../update/FileSelect.vue';
  import axios from 'axios';
  // import moment from 'moment';

  export default {
    components: {FileSelect},
    data() {
      return {
        counter:[{
          aCode:'',
          standardComeTime:'',
        }],//循环的内容
        //标准间来料日期，机台号
        list:[],
        techlist:[],
        dataForm:{
          name: '',
          file: null
        },
        hasfile:false,
        logoList: [],
        address: '',
        checked:false,
        filelist:[],
        form: {
          versionName:'',
          versionTag:'',
          name: '',
          file: null,
          color: '#ff0000'
        },
        imgUrl:
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        srcList: [this.imgUrl],
        listLoading:false,
      };
    },
    created: function() {
        this.fetchData();
    },
    methods: {
      getSTime(val){
        this.sTime=val;//这个sTime是在data中声明的，也就是v-model绑定的值
      },
      confirmDelete(row){
        var that = this;
        this.$confirm('确认删除吗').then( _ => {
          axios.get("/production/deleteSchedule",{
            params:{
              id: row.id,
              ACode: row.aCode
            },
          }).then( res => {
            if(res.data.code == "20000"){
              let arr = [...JSON.parse(res.data.data)];
              console.log(arr);
              this.list = arr;
            }
            this.listLoading = false;
          }).catch( res => {
                this.listLoading = false;
              }
          )
        }).catch( _ =>{

        })
      },
      addInput(){
        this.counter.push({'aCode':'','standardComeTime':''});
      },
      del(index){
        this.counter.splice(index,1);
      },

      onChange(e){
        console.log(`checked"+ ${e.target.checked}`)
      },

      clickpush(){
        this.$refs.upload.submit();  //让httprequest执行,而不是去主动执行这个func
      },
      handleremove(file,filelist){
        if(!filelist.length){
          this.hasfile = false;
        }
        this.form.file = null;
      },
      handlechange(file,filelist){
        if(filelist.length ==1){
          this.hasfile = true;
        }
        this.form.file = file;
      },
      openM() {
        this.$alert("上传成功");
      },
      addEquip(){
        let data = {"equips":this.counter};
        for(var i = 0; i < this.counter.length ; i++){
          if(this.counter[i].standardComeTime == ''){
            this.$alert("存在空值,无法提交");
            return;
          }
        }
        debugger
        axios.post('/production/insertSche',data)
            .then( res => {
              if(res.data.code == "20000"){
                let arr = [...JSON.parse(res.data.data)];
                this.list = arr;
                this.openM();
              }else {
                this.$alert("编号" + res.data.data + "重复");
              }
              this.listLoading = false;
            }).catch( f => {
          this.listLoading = false;
        })
      },
      fetchData() {
        this.listLoading = true;
        axios.get('/production/schetable').then( (res) => {
          if (res.data.code == "20000"){
            let arr = [...JSON.parse(res.data.data)];
            this.list = arr;
          }
          this.listLoading = false;
        }).catch(f =>{
          this.listLoading = false;
        })
      },
      // //日期格式化
      // dateFom(row,column){
      //   var date = row[column.property];
      //   return moment(date).format("YYYY-MM-dd")
      // },
      parseDateFull(time) {
        var x = new Date(time);
        var z = {
          y: x.getFullYear(),
          M: x.getMonth() + 1,
          d: x.getDate(),
        };
        if (z.M < 10) {
          z.M = "0" + z.M;
        }
        if (z.d < 10) {
          z.d = "0" + z.d;
        }
        return z.y + "-" + z.M + "-" + z.d + " ";
      },
    }



  };
</script>

<style>
  .choose-color{
    z-index: 9999;
    /* width: 210px; */
  }
  .line {
    text-align: center;
  }
  .img-wrap {
    width: 100%;
    height: 500px;
    margin-left: 68px;
  }
  .box{
    width: 220px !important;
  }
</style>

